import React, { FC } from 'react';
import ImageView from 'components/BaseComponents/ImageView/index'
import classNames from 'classnames';
import './style.scss';



export type TagsItemProps = {
  type: number,
  title: string
}

export interface HouseListProps {
  src: string;
  desc?: string;
  totalPrice?: string,
  itemProps?: string,
  tags?: TagsItemProps[],
  title: string
}

const HouseList:FC<HouseListProps> = (props) => {

  const { src,desc, totalPrice, itemProps, tags, title } = props;

  return <div className="list-wrapper">
    <a href="http://www.baidu.com" target="_black" className="link"></a>
    <div className="list-left">
    <ImageView
        width={'2.16rem'}
        height={'1.62rem'} src={src} />
    </div>
    <div className="list-right">
      <div className="list-right-title">
        <span className="title-tag">必看好房</span>
        {title}
      </div>
      <div className="list-right-desc">
        {desc}
      </div>
      <div className="list-right-price">
        <em>{totalPrice}</em>
        <span className="unit">万</span>
        <span className="unit_price">{itemProps}元/平</span>
      </div>
      <div className="list-right-tags">
        {
          tags?.map((item, index) => {
            const classes = classNames('tag', {
              'tag1': item.type === 1,
              'tag2': item.type === 2,
              'tag3': item.type === 3,
              'tag4': item.type === 4,
              'tag5': item.type === 5,
            });
            return (
              <span
                key={item.type}
                className={classes}
                title="地铁二手房">{item.title}
              </span>
            )
          })
        }
      </div>
    </div>
  </div>
}

HouseList.defaultProps = {
  src: '/avatar.jpeg',
  title: '朝南，无遮挡，采光好，楼层好',
  desc: '2室2厅/90.46m²/南/漕河泾',
  totalPrice: '900',
  itemProps: '10200',
  tags: [
    {
      title: '地铁',
      type: 1
    },
    {
      title: 'VR房源',
      type: 2
    },
    // {
    //   title: '随时看房',
    //   type: 3
    // },
    {
      title: '满两年',
      type: 4
    },
    {
      title: '有电梯',
      type: 5
    }
  ]
}



export default HouseList;
